<template>
    <div class="template-detail-page">
      <!-- 页面主要内容容器 -->
      <div class="main-container">
        <!-- 左侧信息列 -->
        <div class="left-column">
          <!-- 模板标题和价格 -->
          <div class="template-header">
            <div>
              <div class="flex-center">
                <Avatar :src="templateInfo.logo" />
                <h1 class="template-title">{{ templateInfo.title }}</h1>
              </div>
              <div class="section-label">
                <span class="f14">当前使用模版 :</span>
                <span class="f14">{{ templateInfo.currentTemplate }}</span>
                <span class="bold smill-btn-otherwidth">模版</span>
              </div>
            </div>

            <div class="qrcode-item">
              <div>
                <QrcodeGenerator
                  ref="customQrcode"
                  :content="customQrcodeConfig.content"
                  :size="customQrcodeConfig.size"
                  :foreground-color="customQrcodeConfig.foregroundColor"
                  :background-color="customQrcodeConfig.backgroundColor"
                  :error-correction-level="
                    customQrcodeConfig.errorCorrectionLevel
                  "
                />
              </div>
              <div class="text f13"><span>微信公众号</span><span>扫码预览</span></div>
            </div>
          </div>

          <!-- echarts图表数据 -->
          <div class="template-section">
            <div class="stat-chart">
              <div v-for="stat in statistics" :key="stat.id" class="chart-bar-container">
                <component
                  :is="stat.chartType"
                  :customStyle="{ height: '70px' }"
                  :barWidth="stat.chartType === 'FansBar' ? '30%' : undefined"
                  :chartData="stat.chartType === 'SmallLineChart' ? chartData : undefined"
                  :lineColor="stat.chartType === 'SmallLineChart' ? lineColor : undefined"
                  :showSymbol="stat.chartType === 'SmallLineChart' ? true : undefined"
                  gridLeft="-20"
                  :gridTop="stat.chartType === 'FansBar' ? '20' : undefined"
                />
                <div class="flex-column">
                  <span class="f22 bold">{{ stat.value }}</span>
                  <span class="f12" style="color: var(--neutral-light-gray)">{{ stat.label }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 模板信息 -->
          <div class="template-section-scroll">
            <div class="info-list">
              <icon-title
                title="消息通知"
                :isBold="false"
                :customStyle="{ padding: '0' }"
                textColor="var(--neutral-light-gray)"
              />
              <Notice :customStyle="{ maxHeight: '100px', padding: '0px' }" />
            </div>
          </div>
          <div class="template-section">
            <!-- 模板分类列表 -->
            <div v-for="category in templateCategories" :key="category.id" class="template-category">
              <!-- 促销模板 -->
              <div class="similar-templates">
                <!-- 促销模板部分 -->
                <div class="template-category">
                  <icon-title
                    style="margin: 10px 0"
                    :title="category.title"
                    :isBold="false"
                    :customStyle="{ padding: '0' }"
                    textColor="var(--neutral-light-gray)"
                  />

                  <div class="template-grid">
                    <!-- 模板项 -->
                    <div v-for="template in category.templates" :key="template.id" class="template-item">
                      <div class="template-preview">
                        <img
                          :src="template.image"
                          :alt="template.name"
                          class="template-image"
                        />
                      </div>
                      <div class="template-name">{{ template.name }}</div>
                      <div class="template-meta">
                        <div class="template-subtitle">{{ template.category }}</div>
                        <div class="template-stats">{{ template.purchaseCount }}+人购买过</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间预览列 -->
        <div class="center-column">
          <!-- 预览切换标签 -->
          <div class="preview-tabs">
            <PublicNavBar
              :isFlex="true"
              backgroundColor=""
              :items="navbarList"
              direction="horizontal"
              :horizontalWidth="horizontalWidth"
              @handleItemClick="navbarClick"
              :activeIndex="activeNavbarIndex"
              :itemSpacingArray="[0, 10, 0, 0]"
            />
          </div>

          <!-- 手机预览 -->
          <div class="phone-preview-container">
            <img
              :src="slides[activeSlideIndex]?.src || ''"
              :alt="slides[activeSlideIndex]?.alt || '模板手机预览'"
              class="phone-image"
            />
          </div>

          <!-- 底部预览滑动区域 - 移到center-column内部 -->
          <div class="preview-slides-container">
            <div class="slides-wrapper">
              <ScrollList class="card" :speed="1" ref="ItemScroll">
                <div
                  v-for="(slide, index) in slides"
                  :key="index"
                  class="slide-item"
                  :class="{ active: activeSlideIndex === index }"
                  @click="selectSlide(index)"
                >
                  <div class="slide-content">
                    <img :src="slide.src" :alt="slide.alt" class="slide-image" />
                  </div>
                  <span
                    class="slide-label"
                    :class="{ active: activeSlideIndex === index }"
                    >{{ slide.label }}</span
                  >
                </div>
              </ScrollList>
            </div>
          </div>
        </div>

        <!-- 右侧操作和相似模板列 -->
        <div class="right-column">
          <!-- 企业名称输入 -->
          <div class="input-group">
            <label class="input-label">企业名称：</label>
            <input
              type="text"
              class="company-name-input"
              placeholder="请输入企业名称"
              v-model="companyName"
            />
            <span class="color-back f12" style="padding-left: 10px">
              仅限修改3次
            </span>
          </div>
          <!-- 主题色选择 -->
          <div class="theme-color-group">
            <ThemeColorSelector
              :customColor="customColor"
              :selected-color="selectedThemeColor"
              @color-change="handleThemeColorChange"
            >
              <template #customColor>
                <div class="custom-button-container">
                  自定义
                  <el-color-picker
                    v-model="customColor"
                    show-alpha
                    @change="handleCustomColorChange"
                  ></el-color-picker>
                </div>
              </template>
            </ThemeColorSelector>
          </div>
          <!-- 快捷中心 -->
          <div class="quick-center">
            <h4 class="category-title">快捷中心</h4>
            <div class="quick-actions">
              <div v-for="action in quickActions" :key="action.id" :class="['action-item', action.type]">
                <span>{{ action.label }}</span>
              </div>
            </div>
          </div>
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <button v-for="btn in actionButtons" :key="btn.id" :class="btn.type" @click="handleActionClick(btn)">
              <i v-if="btn.icon" :class="btn.icon"></i>
              {{ btn.label }}
            </button>
          </div>

          <!-- 模板中心 -->
          <div class="similar-templates">
            <h4 class="category-title">模版中心</h4>
            <div class="template-tabs">
              <span
                v-for="tab in templateTabs"
                :key="tab.id"
                class="item"
                :class="{ active: activeTemplateTab === tab.id }"
                @click="setActiveTemplateTab(tab.id)"
              >
                {{ tab.label }}
              </span>
            </div>
            <div class="template-category scroll">
              <div class="template-grid">
                <!-- 模板项 -->
                <div v-for="template in rightColumnTemplates" :key="template.id" class="template-item">
                  <div class="template-preview">
                    <img
                      :src="template.image"
                      :alt="template.name"
                      class="template-image"
                    />
                  </div>
                  <div class="template-name">{{ template.name }}</div>
                  <div class="template-meta">
                    <div class="template-subtitle">{{ template.category }}</div>
                    <div class="template-stats">{{ template.purchaseCount }}+人购买过</div>
                  </div>
                  <!-- 悬停时显示的按钮 -->
                  <div class="template-actions">
                    <button v-for="btn in template.actions" :key="btn.id" :class="['action-btn', btn.type]">
                      {{ btn.label }}
                    </button>
                  </div>
                  <!-- 背景遮罩 -->
                  <div class="template-overlay"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import ScrollList from "@/components/public/ScrollList";
  // 引用公共的导航栏组件
  import PublicNavBar from "@/components/public/NavBar";
  // 引入主题色选择子组件
  import ThemeColorSelector from "@/components/public/ThemeColorSelector/ThemeColorSelector.vue";
  import { color } from "echarts";
  // 引入二维码生成组件
  import QrcodeGenerator from "@/components/public/QrcodeGenerrator.vue";
  export default {
    name: "prodcutTemplate",
    components: {
      PublicNavBar,
      ScrollList,
      ThemeColorSelector,
      QrcodeGenerator,
    },
    data() {
      return {
        // 模板基本信息
        templateInfo: {
          title: "智联科技园",
          currentTemplate: "智慧园区",
          logo: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/391b1f56a776594dd2dd14076c4ce34.jpg"
        },
        
        // 自定义二维码配置
        customQrcodeConfig: {
          content: "https://www.ucharts.cn/v2/#/",
          size: 70,
          foregroundColor: "#333333",
          backgroundColor: "#ffffff",
          errorCorrectionLevel: "M"
        },
        
        companyName: "智联科创园",
        selectedThemeColor: "#1890ff",
        customColor: "",
        themeColor: "#348cf8",
        
        activeIndex: 0,
        activeNavbarIndex: 0,
        horizontalWidth: "60%",
        
        // 导航栏列表
        navbarList: [
          { label: "微官网", path: "" },
          { label: "PC端官网", path: "" }
        ],
        
        // 图表数据
        chartData: [10, 15, 12, 18, 20, 16, 19],
        lineColor: "#348CF8",
        
        // 统计数据
        statistics: [
          {
            id: 1,
            value: "12458",
            label: "累计粉丝量",
            chartType: "FansBar"
          },
          {
            id: 2,
            value: "2683",
            label: "本月新增粉丝数",
            chartType: "SmallLineChart"
          },
          {
            id: 3,
            value: "2568",
            label: "取消关注数",
            chartType: "SmallLineChart"
          },
          {
            id: 4,
            value: "12458",
            label: "累计发布文章",
            chartType: "FansBar"
          },
          {
            id: 5,
            value: "22",
            label: "本月发布文章",
            chartType: "SmallLineChart"
          }
        ],
        
        // 模板分类
        templateCategories: [
          {
            id: 1,
            title: "促销模版",
            templates: [
              {
                id: 101,
                name: "智慧园区",
                image: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
                category: "实体零售",
                purchaseCount: "1000"
              },
              {
                id: 102,
                name: "智慧园区",
                image: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
                category: "实体零售",
                purchaseCount: "1000"
              }
            ]
          },
          {
            id: 2,
            title: "热销模版",
            templates: [
              {
                id: 201,
                name: "智慧园区",
                image: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
                category: "实体零售",
                purchaseCount: "1000"
              },
              {
                id: 202,
                name: "智慧园区",
                image: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
                category: "实体零售",
                purchaseCount: "1000"
              }
            ]
          }
        ],
        
        // 幻灯片数据
        activeSlideIndex: 0,
        slides: [
          {
            src: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
            alt: "首页预览",
            label: "首页",
          },
          {
            src: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back2.png",
            alt: "通知预览",
            label: "通知",
          },
          {
            src: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back3.png",
            alt: "活动预览",
            label: "活动",
          },
          {
            src: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back4.png",
            alt: "活动详情预览",
            label: "活动详情",
          },
        ],
        
        // 快捷中心操作
        quickActions: [
          {
            id: 1,
            type: "two",
            label: "新增\n商品"
          },
          {
            id: 2,
            type: "one",
            label: "新建\n文章"
          }
        ],
        
        // 操作按钮
        actionButtons: [
          {
            id: 1,
            type: "primary-button",
            label: "管理我的微官网"
          },
          {
            id: 2,
            type: "secondary-button",
            label: "公众号智配中心",
            icon: "el-icon-scanning"
          }
        ],
        
        // 模板中心标签页
        templateTabs: [
          { id: 1, label: "已购买" },
          { id: 2, label: "实体零售" },
          { id: 3, label: "生活服务", active: true },
          { id: 4, label: "教育培训" },
          { id: 5, label: "美业服务" },
          { id: 6, label: "休闲娱乐" },
          { id: 7, label: "商务服务" }
        ],
        
        activeTemplateTab: 3,
        
        // 右侧模板列表
        rightColumnTemplates: Array.from({ length: 5 }, (_, i) => ({
          id: i + 1,
          name: "智慧园区",
          image: "https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png",
          category: "实体零售",
          purchaseCount: "1000",
          actions: [
            { id: 1, type: "default-btn", label: "购买" },
            { id: 2, type: "restore-btn", label: "扫码预览" }
          ]
        }))
      };
    },
    methods: {
      // 窝里我的微官网操作按钮点击
      handleActionClick(btn) {
        console.log("点击了", btn.label);
        // 这里可以添加根据按钮类型执行不同操作的逻辑
        if (btn.type === "primary-button") {
          // 管理我的微官网
          this.$router.push({
            path: "/productOpenwecartAfter/admin/Edit",
            // path: "/myResources",
            query: {
              // companyName: this.companyName,
              // themeColor: this.selectedThemeColor,
            },
          });
        } else if (btn.type === "secondary-button") {
          // 公众号智配中心
          this.$router.push({
            path: "/wechatAccountConfigure",
            query: {
              // companyName: this.companyName,
              // themeColor: this.selectedThemeColor,
            },
          });
        }
      },

      handleCustomColorChange(color) {
        console.log("自定义颜色", color);
        this.customColor = color;
      },

      // 主题色组件回调
      handleThemeColorChange(color) {
        this.selectedThemeColor = color;
      },
      
      // 导航栏点击
      navbarClick(obj) {
        console.log("点击的是", obj);
        this.horizontalWidth = obj.index == 0 ? "60%" : "70%";
        this.activeNavbarIndex = obj.index;
      },

      // 选择幻灯片
      selectSlide(index) {
        this.activeSlideIndex = index;
        // 可以在这里添加其他逻辑，比如更新主预览图等
      },
      
      // 设置模板中心活动标签
      setActiveTemplateTab(tabId) {
        this.activeTemplateTab = tabId;
        // 这里可以添加根据标签筛选模板的逻辑
      }
    },
    
    // 组件挂载后可以添加初始化逻辑
    mounted() {
      // 初始化数据
      // 可以从API获取最新数据
    }
  };
  </script>
  
  <style scoped lang="scss">
  .template-detail-page {
    /* padding: 20px; */
    background-color: #f8f9fa;
    /* min-height: 100vh; */
  }
  
  /* 主容器 - 三列布局 */
  .main-container {
    display: flex;
    /* gap: 20px; */
    /* max-width: 1400px; */
    margin: 0 auto;
  }
  
  /* 左侧信息列 */
  .left-column {
    width: 380px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  
  /* 模板标题和价格 */
  .template-header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .qrcode-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .text{
          display: flex;
          flex-direction: column;
          align-items: center;
      }
  }
  
  .template-title {
    font-size: 18px;
    color: #323232;
    margin-bottom: 10px;
    margin-left: 10px;
    font-weight: bold;
  }
  
  .template-price {
    font-size: 24px;
    color: #348cf8;
    font-weight: bold;
  }
  
  .price-unit {
    font-size: 16px;
    font-weight: normal;
  }
  
  /* 通用区块样式 */
  .template-section {
    margin-bottom: 10px;
    .stat-chart {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 10px;
      gap: 10px;
    }
    .chart-bar-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      // gap: 2px;
      // justify-content: center;
    }
  }
  
  .template-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .template-section-scroll {
  }
  
  .section-label {
    font-size: 14px;
    color: #656565;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .smill-btn-otherwidth {
      margin-left: 20px;
    }
  }
  
  /* 标签容器 */
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .tag-item {
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
  }
  
  /* 统计数据 */
  .stats-container {
    display: flex;
    /* justify-content: space-around; */
  }
  
  .stat-item {
    text-align: center;
  }
  
  /* 评分统计项额外样式 */
  .rating-item {
    margin-left: 70px;
  }
  
  .stat-value {
    font-size: 18px;
    color: #323232;
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .stat-label {
    font-size: 12px;
    color: #999;
  }
  
  /* 信息列表 */
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .info-item {
    display: flex;
    /* justify-content: space-between; */
    font-size: 12px;
  }
  
  .info-label {
    color: #999;
  }
  
  .info-value {
    color: #323232;
  }
  
  /* flex布局的2:7比例分配 */
  .info-label-flex {
    flex: 2;
  }
  
  .info-value-flex {
    flex: 7;
  }
  
  /* 模板描述 */
  .template-description {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  
  /* 扫码预览 */
  .qrcode-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  
  /* 左侧flex布局的扫码预览容器 */
  .flex-qrcode {
    flex: 7;
    justify-content: flex-start;
    margin-top: -10px;
  }
  
  .qrcode-image {
    width: 120px;
    height: 120px;
  }
  
  .wechat-link {
    font-size: 12px;
    color: #666;
    text-align: center;
  }
  
  .link-text {
    color: #1890ff;
    text-decoration: none;
  }
  
  /* 管理指南 */
  .guide-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .guide-step {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
  }
  
  .step-number {
    /* background-color: #e6f7ff;
      color: #1890ff; */
    /* padding: 2px 8px; */
    /* border-radius: 4px; */
    /* margin-right: 10px; */
    font-size: 10px;
  }
  
  /* 中间预览列 */
  .center-column {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    /* padding: 20px; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: calc(100% - 780px);
  }
  
  /* 预览标签 */
  .preview-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 20px;
  }
  
  .tab-item {
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
  }
  
  .tab-item.active {
    background-color: #1890ff;
    color: #fff;
  }
  
  /* 手机预览容器 */
  .phone-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
  }
  
  .phone-image {
    max-width: 100%;
    max-height: 430px;
    margin-top: 40px;
  }
  
  /* 右侧操作和相似模板列 */
  .right-column {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  /* 输入组样式 */
  .input-group {
    display: flex;
    align-items: center;
  }
  
  .input-label {
    font-size: 14px;
    color: #333;
    margin-right: 10px;
    white-space: nowrap;
  }
  
  .company-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    width: 30px;
  }
  /* 主题色选择 */
  .theme-color-group {
    display: flex;
    align-items: center;
  }
  /* 快捷中心 */
  .quick-center {
    .quick-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .action-item.one {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #348cf8;
      background-image: url("@/assets/home/admin/home/article.png");
    }
    .action-item.two {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #eb7940;
      background-image: url("@/assets/home/admin/home/product.png");
    }
    .action-item {
      flex: 1;
      background: white;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: center;
      width: 180px;
      height: 90px;
      cursor: pointer;
      /* 添加过渡效果，使hover变化更平滑 */
      transition: all 0.3s ease;
      span {
        padding-left: 20px;
        font-size: 16px;
        white-space: pre-line
      }
    }
  }
  /* 添加hover效果 */
  .action-item:hover {
    /* 轻微放大 */
    transform: scale(1.03);
    /* 添加阴影，增强立体感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  /* 操作按钮 */
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .primary-button {
    background-color: #1890ff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .primary-button:hover {
    background-color: #40a9ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  /* 添加点击效果 */
  .primary-button:active {
    /* 点击时轻微缩小，给用户按下的感觉 */
    transform: scale(0.98);
    /* 添加内阴影，模拟被按下去的效果 */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  .secondary-button {
    background-color: #fff;
    color: #1890ff;
    border: 1px solid #1890ff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  
  .secondary-button:hover {
    background-color: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  /* 添加点击效果 */
  .secondary-button:active {
    /* 点击时轻微缩小，给用户按下的感觉 */
    transform: scale(0.98);
    /* 添加内阴影，模拟被按下去的效果 */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  /* 相似模板 */
  .similar-templates {
    flex: 1;
    margin-top: 10px;
  }
  
  /* 模板分类 */
  .template-category.scroll {
    margin-bottom: 20px;
  }
  .template-category.scroll {
    overflow-y: auto; /* 明确指定垂直滚动 */
    height: 550px;
  }
  /* 自定义滚动条样式 - WebKit浏览器 */
  .template-category.scroll::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
    display: none;
  }
  
  .template-category.scroll::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道背景色 */
    border-radius: 3px; /* 滚动条轨道圆角 */
  }
  
  .template-category.scrolld::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* 滚动条滑块颜色 */
    border-radius: 3px; /* 滚动条滑块圆角 */
    transition: background 0.3s ease;
  }
  
  .template-category.scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* 鼠标悬停时滚动条滑块颜色 */
  }
  
  .template-category.scroll::-webkit-scrollbar-corner {
    background: #f1f1f1; /* 滚动条角落背景色 */
  }
  
  /* 自定义滚动条样式 - 非WebKit浏览器 */
  .template-category.scroll {
    scrollbar-width: thin; /* 滚动条宽度：thin, auto, none */
    scrollbar-color: #c1c1c1 #f1f1f1; /* 滚动条滑块颜色 滚动条轨道颜色 */
  }
  
  .template-tabs {
    /* 修改为grid布局 */
    display: grid;
    /* 设置每行四列，每列等宽 */
    grid-template-columns: repeat(4, 1fr);
    /* 设置网格间距 */
    gap: 5px;
    margin-bottom: 5px;
  }
  
  .item {
    font-size: 13px;
    /* 文字居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 调整内边距 */
    padding: 2px 0;
    /* 保持边框 */
    /* 保持背景色 */
    /* 添加圆角，提升美观度 */
    border-radius: 30px;
    /* 鼠标悬停时显示指针 */
    cursor: pointer;
    /* 添加过渡效果 */
    transition: all 0.3s ease;
  }
  
  .item:hover {
    /* 鼠标悬停时的样式 */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  
  /* 激活状态的样式保持不变 */
  .item.active {
    background-color: #348cf8;
    border-color: #348cf8;
    color: #fff;
  }
  /* 按钮点击效果 */
  .item:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .category-title {
    font-size: 14px;
    color: #8d8c8c;
    margin-bottom: 15px;
  }
  
  /* 模板网格布局 */
  .template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  /* 单个模板项 */
  .template-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
  }
  
  .template-item:hover {
    transform: translateY(-2px);
  }
  
  /* 操作按钮容器 - 默认隐藏 */
  .template-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 80%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
  }
  
  /* 鼠标悬停时显示遮罩和按钮 */
  .template-item:hover .template-overlay,
  .template-item:hover .template-actions {
    opacity: 1;
    border-radius: 4px;
  }
  /* 背景遮罩 - 默认隐藏 */
  .template-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    border-radius: 4px;
  }
  /* 按钮样式 */
  .action-btn {
    width: 80px;
    padding: 6px 0;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    /* 纯白 */
    border: 1px solid #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    margin: 0 auto;
  }
  
  .action-btn:hover {
    background-color: transparent !important;
    transform: scale(1.02);
  }
  
  .default-btn {
    background-color: transparent !important;
    color: #fff !important;
  }
  
  .restore-btn {
    background-color: transparent !important;
    color: #fff !important;
  }
  /* 模板预览容器 */
  .template-preview {
    width: 100%;
    background-color: #e6f7ff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .template-image {
    width: 100%;
    max-height: 102px;
    object-fit: contain;
  }
  
  .template-name {
    font-size: 14px;
    color: #323232;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: left;
    align-self: flex-start;
  }
  
  /* 元信息容器 - 用于放置实体零售和购买统计 */
  .template-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .template-subtitle {
    font-size: 12px;
    color: #aa7123;
    margin: 0;
    text-align: left;
  }
  
  .template-stats {
    font-size: 12px;
    color: #323232;
    margin: 0;
    text-align: right;
  }
  
  /* 响应式调整 */
  @media (max-width: 1200px) {
    .template-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* 底部预览滑动区域 */
  .preview-slides-container {
    background-color: #fff;
    /* padding: 20px; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 41px;
  }
  
  /* 自定义滚动条样式 - Webkit浏览器 */
  .preview-slides-container::-webkit-scrollbar {
    height: 6px;
  }
  
  .preview-slides-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
  }
  
  .preview-slides-container::-webkit-scrollbar-thumb {
    background: #1890ff;
    border-radius: 3px;
  }
  
  .preview-slides-container::-webkit-scrollbar-thumb:hover {
    background: #40a9ff;
  }
  
  .slides-wrapper {
    display: flex;
    gap: 27px;
    /* 确保内容不换行 */
    white-space: nowrap;
    /* 增加一点内边距让最后一个元素有空间 */
  }
  
  .slide-item {
    width: 143px;
    height: 165px;
    text-align: center;
    background-color: #e8f1fd;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 22px;
  }
  
  /* 移除行内样式，统一用CSS类控制 */
  /* .slide-item[style*="border: 1px solid red"] {
      border: 1px solid #34C3F8 !important;
    } */
  
  .slide-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
  }
  
  .slide-content {
    max-height: 110px;
    max-width: 80px;
    margin: 10px auto;
    overflow: hidden;
    margin-bottom: 2px !important;
  }
  
  .slide-item.active {
    border: 1px solid #1890ff;
    /* background-color: #fff; */
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    transform: translateY(-2px);
  }
  
  /* 活动标签特殊样式 */
  /* .slide-item:nth-child(3)::after {
      content: "169.47";
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: #ff4d4f;
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    } */
  
  .slide-image {
    object-fit: cover;
    margin-bottom: 8px;
    border-radius: 4px;
    width: 100%;
    height: auto;
  }
  
  .slide-label {
    font-size: 14px;
    color: #323232;
    font-weight: 500;
    display: block;
    margin-top: 5px;
  }
  .slide-label.active {
    color: #348cf8 !important;
    font-weight: bold;
  }
  
  /* 响应式设计 */
  @media (max-width: 1200px) {
    .main-container {
      flex-direction: column;
    }
  
    .left-column,
    .right-column {
      width: 100%;
    }
  }
  
  /* 新增的flex布局样式 */
  .flex-section {
    display: flex;
  }
  
  .flex-label {
    flex: 2;
    font-size: 12px;
    color: #999;
  }
  
  .flex-description {
    flex: 7;
  }
  
  .flex-guide {
    flex: 7;
  }
  
  /* 管理端连接特殊样式 */
  .management-section {
    margin-top: 10px;
  }
  </style>
  